<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>手机笔画输入法 (网页版)</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="/ezkeypad/media/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/ezkeypad/media/jquery.timers.js"></script>
<script type="text/javascript">
var g_service_ready = false;
var g_loading_timeout = 30; // seconds
var g_process_interval = 1; // seconds
var g_process_spend = 0;

function show_progress_bar() {
    html_src = '<div id="progress_bar" style="position: absolute; left: 50px; top: 30px;"><span id="progress_bar_label">加载中...</span><br><div id="progress_bar" style="width: 300px; height: 10px; border: 1px solid #949dad; margin-top: 5px; padding: 1px;"><div id="progress_running" style="height: 10px; width: 2px; background-color: #bbc2ee;"></div></div></div>';
    $('body').append(html_src);
    
    // set timer
    $('#progress_running').oneTime(g_process_interval*1000, function () {
        g_process_spend += g_process_interval;
        w = g_process_spend*300/g_loading_timeout;
        $(this).css({'width':w});
        
        $(this).everyTime(g_process_interval*1000, 'progress_bar_timer', function () {
            g_process_spend += g_process_interval;
            if (g_service_ready) {
                $(this).stopTime('progress_bar_timer');
                $(this).css({'width':300});
                $(this).oneTime(g_process_interval*1000, function () {
                    // start to serve. 
                    $('#progress_bar').remove();
                    $('div').css({'visibility':'visible'});
                    $('body').css({'background-color':'#bbc2ee'});
                });
            } else {
                if (g_process_spend > g_loading_timeout) {
                    $(this).stopTime('progress_bar_timer');
                    $(this).css({'width':300});
                    // notify user to refresh
                    $('#progress_bar_label').html('加载失败，<a href="javascript:window.location.reload();">请刷新</a>');
                } else {
                    w = g_process_spend*300/g_loading_timeout;
                    $(this).css({'width':w});
                }            
            }
        });
    });
}

$(document).ready(function () {
    // start to show progress bar
    //console.log('in document.ready');
    show_progress_bar();
});
</script>
<!-- additional html/js/css/image goes here -->
<script type="text/javascript" src="/ezkeypad/slow/ime.js"></script>
<link rel="stylesheet" type="text/css" href="/ezkeypad/slow/main.css">
</head>
<body>
<div style="background-image: url(/ezkeypad/slow/bg.png); width: 750px; height: 700px; visibility: hidden;">slow_main</div>
</body>
<!-- additional html/js/css/image end -->
<script type="text/javascript">
window.onload = function () {
    // finish download all necessary js/css/image
    // start service
    //console.log('in window.onload');
    g_service_ready = true;
};
</script>
</html>